<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>已完成的事情</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mitt@2.1.0/dist/mitt.umd.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(50px);
  }

  .list-move,
  .list-enter-active,
  .list-leave-active {
    transition: all 1s linear 0s;
  }

  .list-leave-active {
    position: absolute;
  }


    </style>
</head>
</html>

<body>
    <div id="app">
        <h1>任务清单</h1>
        <input type="text" v-model="things" placeholder="输入任务" class="form-control">
        <button @click="addThings" class="btn btn-success mt-3">添加任务</button> 
        <button @click="clearAllThings"  class="btn btn-danger mt-3">清除所有任务</button>
        <my-component :incomplete="listThings"></my-component>
        <my-componenttwo ref="componentTwoRef"></my-componenttwo>
    </div>
    <template id="child-template">
        <h2>待定列表</h2>
        <ul class="list-group">
        <transition-group name="list" tag="ul">
            <li v-for="(item,index) in incomplete" :key="item" class="list-group-item">{{item}} <button
                    @click="haveCompletedThings(item,index)" class="btn btn-success btn-sm float-end">已完成</button></li>
        </transition-group>
        </ul>
    </template>
    <template id="child-templateTwo">
        <h2>已完成列表</h2>
        <ul class="list-group">
        <transition-group name="list" tag="ul">
            <li v-for="(item,index) in haveCompleted" :key="item" class="list-group-item">{{item}}<button
                    @click="delIncomplete(index)" class="btn btn-danger btn-sm float-end">删除</button>
            </li>
        </transition-group>
        </ul>
    </template>
    <script>
        const emitter = window.mitt()
        const { ref, reactive, provide, inject } = Vue
        const app = Vue.createApp({
            setup(props) {
                const things = ref("")
                const listThings = ref([])
                const componentTwoRef = ref(null)
                const addThings = () => {
                    listThings.value.push(things.value)
                }
                const clearAllThings = () => {
                    listThings.value = []
                    console.log(componentTwoRef)
                    componentTwoRef.value.clearHaveCompletedThings()
                }

                return { things, addThings, listThings, clearAllThings, componentTwoRef }
            }
        })
        app.component('my-component', {
            template: "#child-template",
            props: {
                incomplete: {
                    type: Array,
                    default: []
                }
            },
            setup(props) {
                const haveCompletedThings = (item, index) => {
                    emitter.emit('busEmit', item)
                    props.incomplete.splice(index, 1)
                }

                return { haveCompletedThings, }
            }
        })
        app.component('my-componenttwo', {
            template: "#child-templateTwo",
            setup() {
                const haveCompleted = ref([])
                emitter.on('busEmit', (v) => {
                    haveCompleted.value.push(v)
                })
                const delIncomplete = (index) => {
                    haveCompleted.value.splice(index, 1)
                }
                const clearHaveCompletedThings = () => {
                    haveCompleted.value = []
                }
                return { haveCompleted, delIncomplete, clearHaveCompletedThings }
            }
        })
        app.mount('#app')

    </script>

</body>

</html>